<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UnionSmart-合众聚智</title>
    <link rel="stylesheet" href="css/sui.css">
    <!--<link rel="stylesheet" href="//g.alicdn.com/sj/qnui/1.5.1/css/sui-append.min.css">-->
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <!--top bar 开始-->
    <div class="top">
        <div class="back-imge">
            <div class="logo"><img src="imges/logo.png" style=""></div>
            <div class="nav" style="line-height: 68px">
                <a href="#" style="">
                    HTML+CSS
                </a>
                <a href="#" style="">
                    Javascript
                </a>
                <a href="#" style="">
                    jQurey
                </a>
            </div>
            <div class="right">
                <a class="username">张晓宇(江湖人称65年哥)</a>
                <span class="fenge">|</span>
                <a class="quit">退出</a>
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="clear: both">
        </div>
    </div>
    <!--top bar 结束-->
    <!--body开始-->
    <div class="rbody">
        <!-- 左侧导航开始-->
        <div class="left">
            <li class="item active">
                <i class="icon note-icon-active">
                </i>
                <a href="#" class="a a-active">第13天作业</a>
            </li>
            <li class="item">
                <i class="icon note-icon">
                </i>
                <a href="#" class="a">第14天作业</a>
            </li>
        </div>
        <!--左侧导航结束-->
        <!--title开始-->
        <div class="title">
            <span>作业一</span>
        </div>
        <!--title结束-->
        <!--main开始-->
        <div class="main">
            <table class="sui-table table-primary table-zebra">
                <thead>
                    <tr>
                        <!--<th style="width: 10%;text-align: center"><input type="checkbox">全选</th>-->
                        <th style="width: 20%;text-align: center">主机名</th>
                        <th style="width: 15%;text-align: center">IP地址</th>
                        <th style="width: 40%;text-align: center">配置</th>
                        <th style="width: 10%;text-align: center">端口</th>
                        <th style=" text-align: center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <!--<td><input type="checkbox"></td>-->
                        <td>nginx服务器1</td>
                        <td>10.10.1.2</td>
                        <td>至强8核16G*4/8G*4/500G*2</td>
                        <td>80</td>
                        <td><a href="#" class="sui-btn btn-primary edit"><i class="sui-icon icon-pencil"></i>编辑</a></td>
                    </tr>
                    <tr>
                        <!--<td><input type="checkbox"></td>-->
                        <td>nginx服务器2</td>
                        <td>10.10.1.3</td>
                        <td>至强8核16G*4/8G*4/500G*2</td>
                        <td>80</td>
                        <td><a href="#" class="sui-btn btn-primary edit"><i class="sui-icon icon-pencil"></i>编辑</a></td>
                    </tr>
                    <tr>
                        <!--<td><input type="checkbox"></td>-->
                        <td>MySQL服务器</td>
                        <td>10.10.1.4</td>
                        <td>至强8核16G*4/8G*8/500G*3</td>
                        <td>3306</td>
                        <td><a href="#" class="sui-btn btn-primary edit"><i class="sui-icon icon-pencil"></i>编辑</a></td>
                    </tr>
                    <tr>
                        <!--<td><input type="checkbox"></td>-->
                        <td>备份服务器</td>
                        <td>10.10.1.5</td>
                        <td>至强8核16G*4/8G*4/500G*2</td>
                        <td>3306</td>
                        <td><a href="#" class="sui-btn btn-primary edit"><i class="sui-icon icon-pencil"></i>编辑</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--main结束-->
    <!--body 结束-->
    <!--对话框开始-->
    <div id="edit" tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="edithost" action="dfasd" method="get" class="sui-form form-horizontal">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                    <h4 id="mode-title" class="modal-title">编辑</h4>
                </div>
                <div class="modal-body">
                        <div name="hostname_group" class="control-group">
                            <label for="hostname" class="control-label">主机名：</label>
                            <div class="controls">
                                <input name="hostname" type="text" id="hostname" value="">
                                <div name="hostname_error" class="sui-msg msg-naked msg-error hide">
                                    <i class="msg-icon"></i>
                                    <div class="msg-con"></div>
                                </div>
                            </div>
                        </div>
                        <div name="ipaddr_group" class="control-group">
                            <label for="ipaddr" class="control-label">IP地址：</label>
                            <div class="controls">
                                <input name="ipaddr" type="text" id="ipaddr" value="">
                                <div name="ipaddr_error" class="sui-msg msg-naked msg-error hide">
                                    <i class="msg-icon"></i>
                                    <div class="msg-con"></div>
                                </div>
                            </div>
                        </div>
                        <div name="configuration_group" class="control-group">
                            <label for="configuration" class="control-label">配置：</label>
                            <div class="controls">
                                <input name="configuration" type="text" id="configuration" value="">
                                <div name="configuration_error" class="sui-msg msg-naked msg-error hide">
                                    <i class="msg-icon"></i>
                                    <div class="msg-con"></div>
                                </div>
                            </div>
                        </div>
                        <div name="port_group" class="control-group">
                            <label for="port" class="control-label">端口：</label>
                            <div class="controls">
                                <input name="port" type="text" id="port" value="">
                                <div name="port_error" class="sui-msg msg-naked msg-error hide">
                                    <i class="msg-icon"></i>
                                    <div class="msg-con"></div>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="modal-footer">
                <button id="sb" type="button" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
                <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <script src="js/jquery-2.2.3.js"></script>
    <script src="js/sui.js"></script>
    <script src="js/prettify.js"></script>
    <script>
//        var required = function(value, element, param){
//            return trim(value);
//        };
//        $.validate.setRule("requiered", required, funtion ($input){
//            var tagName = $input[0].tagName.toUpperCase();
//            var type = $input[0].type.toUpperCase()
//            if(type== 'CHECHBOX' || type == 'RADIO' || tagName == 'SELECT'){
//                return '请选择'
//            }
//            return '请填写'
//        });
        $(function () {
            var _jahDivs = $(".rbody");
            _jahDivs.css("overflow", "auto");
            $(window).resize(function () {
                // 监控窗口大小改变，调整左侧导航条高度，使得左侧导航条的高度适应窗体的变化
                var _addHeight = $(window).height() - $("body").outerHeight(true);
                var _height = _jahDivs.height();
                _jahDivs.height(_height + _addHeight - (_jahDivs.outerHeight(true) - _height) / 2);
            }).resize();

            $(".edit").click(function () {
//                tds = $(this).parent().parent().children();
                tds = $(this).parent().siblings(); // 获取编辑按钮所对应的哪一行的对象
                // 清空或隐藏表单所有错误信息的样式
                $("[name='hostname_group']").removeClass('error');
                $("[name='ipaddr_group']").removeClass('error');
                $("[name='configuration_group']").removeClass('error');
                $("[name='port_group']").removeClass('error');
                $("[name='hostname_error']").addClass('hide');
                $("[name='ipaddr_error']").addClass('hide');
                $("[name='configuration_error']").addClass('hide');
                $("[name='port_error']").addClass('hide');
                // 获取编辑按钮的对应主机信息
                hostname = tds.eq(0).text(); // 主机名
                ipaddr = tds.eq(1).text(); // ip地址
                conf = tds.eq(2).text(); // 配置
                port = tds.eq(3).text(); // 端口
                // 将主机信息填写到对应的表单项中
                $('#hostname').val(hostname);
                $('#ipaddr').val(ipaddr);
                $('#configuration').val(conf);
                $('#port').val(port);
                // 修改模态对话框的标题
                $('#mode-title').text('编辑 '+ hostname);
                // 让模态对话框从隐藏状态变为现实状态
                $('#edit').modal('show');
            });
            $('#sb').click(function (){
                // 监控提交按钮事件
                // 判断用户名是否为空，如果为空提示信息并返回false
                var isfail = false;
                var hostname = $('#hostname').val();
                var ipaddr = $('#ipaddr').val();
                var configuration = $('#configuration').val();
                var port = $('#port').val();
                if(hostname == ''){
                    $("[name='hostname_group']").addClass('error');
                    var errorTag = $("[name='hostname_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('主机名必须填写');
//                    return false;
                    isfail = true;
                }
                // 判断ip地址是否为空，如果为空提示信息并返回false
                if(ipaddr == ''){
                    $("[name='ipaddr_group']").addClass('error');
                    var errorTag = $("[name='ipaddr_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('IP地址必须填写');
//                    return false;
                    isfail = true;
                }
                // 判断IP地址是否符合规范
                if(ipaddr.match(/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/) == null){
                    $("[name='ipaddr_group']").addClass('error');
                    var errorTag = $("[name='ipaddr_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('IP地址不合法');
//                    return false;
                    isfail = true;
                }

                // 判断配置信息是否为空，如果为空提示信息并返回false
                if(configuration == ''){
                    $("[name='configuration_group']").addClass('error');
                    var errorTag = $("[name='configuration_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('配置必须填写');
//                    return false;
                    isfail = true;
                }

                // 判断端口号是否为数字类型，如果不是提示信息并返回false
                if(port.match(/^[0-9]*$/) == null){
                    $("[name='port_group']").addClass('error');
                    var errorTag = $("[name='port_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('端口必须是数字');
//                    return false;
                    isfail = true;
                }
                // 判断端口是否为空，如果为空提示信息并返回false
                if(port == ''){
                    $("[name='port_group']").addClass('error');
                    var errorTag = $("[name='port_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('端口必须填写');
//                    return false;
                    isfail = true;
                }
                // 判断端口号是否合法
                if((0>=parseInt(port)) || (parseInt(port)>=65535)){
                    console.log(parseInt(port));
                    $("[name='port_group']").addClass('error');
                    var errorTag = $("[name='port_error']");
                    errorTag.removeClass('hide');
                    errorTag.children('.msg-con').text('端口不合法');
//                    return false;
                    isfail = true;
                }
                // 如果表单验证都通过，提交表单
                if(!isfail){
                    $('#edithost').submit();
                }
                else{
                    return false
                }
//                console.log('dfdsafd')
            });
        });
    </script>
</body>
</html>